<template>
  <div>
    <el-dialog :visible="showDialog" title="添加房产" width="70%" @close="closeFn">
      <el-form ref="form" label-width="80px">
        <el-form-item v-model="formdata.agent" label="经纪">
          <el-select v-model="formdata.agent" placeholder="请选择经纪">
            <el-option v-for="item in agentsList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="formdata.category" placeholder="请选择分类">
            <el-option v-for="item in AllcategoriesList" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" style="width:80%">
          <el-input v-model="formdata.title" />
        </el-form-item>
        <el-form-item label="标签" style="width:20%">
          <el-row type="flex" justify="space-between">
            <el-tag
              v-for="tag in formdata.tags"
              :key="tag"
              v-model="formdata.tags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
          </el-row>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>

        </el-form-item>
        <el-form-item label="地址">
          <el-row type="flex" justify="space-between">
            <div id="app">
              <el-cascader
                v-model="selectedOptions"
                size="large"
                :options="options"
                :props="{ value: 'label' }"
                @change="handleChange"
              />
            </div>
            <el-input v-model="formdata.address" />
          </el-row>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="formdata.price" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formdata.desc" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="formdata.content" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="介绍图片">
          <uploadImg1 ref="photos" />
        </el-form-item>
        <el-form-item label="封面">
          <uploadImg ref="photo" />
        </el-form-item>
      </el-form>

      <el-row type="flex" justify="center">
        <el-button type="primary" size="small" @click="comfirm">确认</el-button>
        <el-button type="" size="small" @click="closeFn">取消</el-button>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import { addHouse, editHouse, editHouseComfirm } from '@/api/houseManager'
import { regionData } from 'element-china-area-data'
import { categoriesList } from '@/api/categories'// 获取全部分类列表
import { getAgentsList } from '@/api/agents'// 获取经纪列表
import uploadImg1 from '@/views/agents/components/upload-Img+.vue'
export default {
  components: {
    uploadImg1
  },
  props: {
    showDialog: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // vue城市选择器
      options: regionData,
      selectedOptions: [],
      // vue城市选择器end

      agentsList: [], // 渲染下拉框经纪列表的数组
      AllcategoriesList: [], // 渲染全部的扽类列表数组
      // 标签的变量 start
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      // 标签的变量end

      // 下拉菜单的数据
      // options: [
      //   {
      //     value: '选项1',
      //     label: '黄金糕'
      //   }
      // ],
      value: '', // 地址
      formdata: {
        title: '', // 标题
        desc: '', // 描述
        image: '', // 图片封面
        agent: '', // 属于哪个经纪的 id 值
        content: '', // 内容
        address: '', // 地址
        price: '', // 价格
        photos: [], // 图片,介绍url 组成数组
        tags: [], // 标签, 字符串组成数组
        category: ''// 属于哪个分类 id 值
      }
    }
  },
  async created() {
    this.getAgentsList()// 经纪列表
    this.categoriesList()// 分类

    // console.log(161, this.options)// 省市级联
    // console.log(162, this.selectedOptions)// 省市级联
    // this.formdata.address = this.selectedOptions.join(',')
  },
  methods: {
    async editHouse(id) {
      console.log(id)
      const res = await editHouse(id)
      console.log('回显的数据', res)
      this.formdata = { ...res.data, category: res.data.category.id }
      this.$refs.photos.edit(this.formdata.photos)
      this.$refs.photo.edit(this.formdata.image)
      // console.log(149, this.formdata)
    },
    closeFn() {
      this.$emit('update:showDialog', false)
      this.formdata = {
        title: '', // 标题
        desc: '', // 描述
        image: '', // 图片封面
        agent: '', // 属于哪个经纪的 id 值
        content: '', // 内容
        address: '', // 地址
        price: '', // 价格
        photos: [], // 图片,介绍url 组成数组
        tags: [], // 标签, 字符串组成数组
        category: ''// 属于哪个分类 id 值
      }
      this.$refs.photos.fileList = []
      this.$refs.photo.fileList = []
      this.formdata.photos = []
      this.formdata.image = ''
    },
    async comfirm() {
      if (this.formdata.id) {
        // this.handdiePct()
        // const fileList = this.$refs.photos.fileList
        // this.formdata.photos = fileList.map(item => item.url)
        this.handdiePct()
        console.log(176, this.formdata)
        editHouseComfirm(this.formdata)
      } else {
        this.handdiePct()
        await addHouse(this.formdata)
      }
      this.$emit('updateHouseList')
      this.$emit('updateTotal')
      this.closeFn()
    },
    // 图片数据处理
    handdiePct() {
      // 上面介绍图片数组
      const fileList = this.$refs.photos.fileList
      this.formdata.photos = fileList.map(item => item.url)
      console.log(194, this.formdata.photos)
      // 下面封面一张图片地址
      this.formdata.image = this.$refs.photo.fileList && this.$refs.photo.fileList[0].url
    },
    // 获取经纪列表
    async getAgentsList() {
      const res1 = await getAgentsList()
      this.agentsList = res1.data// 经纪列表
    },
    // 获取分类列表
    async categoriesList() {
      const res2 = await categoriesList()// 分类
      // console.log(res2)
      this.AllcategoriesList = res2.data
    },
    // 省级插件
    handleChange(value) {
      // console.log(167, value)
      this.formdata.address = this.selectedOptions.join(',')
    },

    handleClose(tag) {
      this.formdata.tags.splice(this.formdata.tags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.formdata.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }

}
</script>

<style lang="scss" scoped>
.el-tag {
  margin-right: 10px;
}

.el-cascader {
  width: 40px;
}
</style>
